<template>
  <view class="content">
    <view v-if="!token" class="login-box" @click="showAuth">
      <image src="@/static/images/bg2.png" mode="scaleToFill" class="img" @click="showAuth" />
      <image src="@/static/images/tou.png" mode="scaleToFill" class="avator-default" />
      <view class="btn-text"> 点击登录</view>
    </view>
    <block v-else>
      <view class="login-box user-head">
        <image src="@/static/images/bg2.png" mode="scaleToFill" class="img" />

        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <view class="avator-box">
            <image :src="userInfo.avatar ? userInfo.avatar :  '@/static/images/tou.png'" mode="scaleToFill" class="avator" />
          </view>
        </button>

        <view class="msg">
          <view class="name" @tap="changeNickName">{{
            userInfo.nickname
          }}</view>
          <!-- <view class="phone">{{ userInfo.phone }}</view> -->
        </view>
      </view>
      <view class="record-list">
        <view class="record" @click="toRecord">
          <image src="@/static/images/jilu.png" mode="scaleToFill" class="record-icon" />
          <text class="text">使用记录</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
        <u-gap height="15" bgColor="transparent"></u-gap>
        <view class="record" @click="toMineCard">
          <image src="@/static/images/ka.png" mode="scaleToFill" class="record-icon" />
          <text class="text">我的次卡</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </block>

    <u-modal :show="nickNameShow" title="编辑昵称" showConfirmButton showCancelButton @confirm="confirmAddNickname" closeOnClickOverlay @cancel="nickNameShow = false" @close="nickNameShow = false">
      <input id="nickname-input" border="surround" v-model="nickName" type="nickname" class="weui-input" placeholder="请输入昵称" />
    </u-modal>

    <AuthOverlay ref="authOverlayRef" @loginSuccess="loginSuccess"></AuthOverlay>
  </view>
</template>

<script setup>
import { getToken } from "@/utils/auth";
import { UserApi } from "@/api";
import { useUserStore } from "@/store/index";

const userStore = useUserStore();
const redirectUrl = ref("");
onLoad((options) => {
  if (options.redirect) {
    redirectUrl.value = decodeURIComponent(options.redirect);
    console.log("redirectUrl.value--", redirectUrl.value);
  }
});
onShow(() => {
  if (getToken()) {
    userStore.getUserInfo();
  }

  // getUserInfo()
});
// const userInfo = ref({
//   nickname: "122",
//   phone: "15915523241",
// });

const userInfo = computed(() => {
  return userStore.userInfo;
});
const token = computed(() => {
  return userStore.token;
});
// const token = ref("");
// function getUserInfo() {
//   // userInfo.value = uni.getStorageSync("userInfo");
//   token.value = getToken();
// }
function loginSuccess() {
  console.log("登录成功");
  if (redirectUrl.value) {
    uni.navigateTo({
      url: redirectUrl.value,
    });
  }
}

const authOverlayRef = ref(null);
function showAuth() {
  authOverlayRef.value.show = true;
}
const nickNameShow = ref(false);
const nickName = ref("");
const vue3This = getCurrentInstance().proxy;
function confirmAddNickname() {
  let that = this;
  uni
    .createSelectorQuery()
    .in(vue3This) // 注意这里要加上 in(this)
    .select("#nickname-input")
    .fields({
      properties: ["value"],
    })
    .exec((res) => {
      console.log(res, res);
      nickName.value = res?.[0]?.value;
      if (nickName.value.trim().length == 0) {
        uni.showToast({
          title: "请输入昵称！",
          icon: "none",
        });
        return;
      }
      updateUserInfo({
        nickname: nickName.value,
      });
      nickNameShow.value = false;
    });
}
function onChooseAvatar(e) {
  const { avatarUrl } = e.detail;
  if (avatarUrl) {
    const base64Str =
      "data:image/jpeg;base64," +
      wx.getFileSystemManager().readFileSync(avatarUrl, "base64");
    console.log("base64Str--", base64Str);
    UserApi.postFileByBase64({ base64Str }).then((data) => {
      updateUserInfo({
        avatar: data.accessUrl,
      });
    });
  }
}

function changeNickName() {
  nickNameShow.value = true;
  nickName.value = userInfo.value.nickname;
}

// 更新用户信息
function updateUserInfo(obj) {
  UserApi.postUpdateUserInfo({
    ...obj,
  }).then(() => {
    userStore.getUserInfo();
  });
}
function toRecord() {
  uni.navigateTo({
    url: "/pagesCommon/record/index",
  });
}
function toMineCard() {
  uni.navigateTo({
    url: "/pages/mine/package",
  });
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 24rpx;
}

.login-box {
  position: relative;
  display: flex;
  align-items: center;
  padding: 36rpx;
  margin: 30rpx 0;
  // box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(142, 142, 142, 0.5);
  .avatar-wrapper {
    margin: 0;
    line-height: 1;
    padding: 0;
    background: transparent;
    &::after {
      border: none;
      display: none;
    }
  }
  .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 248rpx;
  }

  .avator-default {
    z-index: 1;
    width: 176rpx;
    height: 176rpx;
  }

  .btn-text {
    z-index: 1;
    margin-left: 26rpx;
    font-size: 44rpx;
    color: #fff;
    font-weight: 600;
    line-height: 60rpx;
  }
}

.user-head {
  align-items: flex-start;

  .avator-box {
    z-index: 1;

    .avator {
      width: 176rpx;
      height: 176rpx;
      border-radius: 50%;
    }
  }

  .msg {
    flex: 1;
    z-index: 1;
    // padding: 12rpx 0;
    margin-left: 42rpx;
    align-self: center;

    .name {
      // margin-bottom: 40rpx;
      font-size: 44rpx;
      color: #fff;
      font-weight: 600;
      line-height: 60rpx;
    }

    .phone {
      font-size: 32rpx;
      color: #fff;
      line-height: 44rpx;
    }
  }
}

.record-list {
  .record {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    height: 120rpx;
    background: #fff;
    border-radius: 12rpx;
    box-shadow: 0 0 10px #eaeaea;
    box-shadow: 0rpx 4rpx 8rpx 0rpx rgb(211 211 211 / 50%);

    .record-icon {
      margin-right: 24rpx;
      width: 60rpx;
      height: 60rpx;
    }

    .text {
      font-weight: 400;
      font-size: 34rpx;
      color: #333;
      flex: 1;
    }
  }
}

.weui-input {
  border-radius: 4px;
  padding: 6px;
  border-width: 0.5px !important;
  border-color: #dadbde !important;
  border-style: solid;
  width: 100%;
}
</style>
